<template>
  <view class="container">
  	<top-back-navbar position="fixed" title="诗酒花茶" background="#ffffff" color="#000000"></top-back-navbar>
  	<scroll-view class="scroll-box" scroll-y>
  		<view class="content">
  			<view class="goods_list">
  				<view class="goods_item-group" v-for="(item,index) in listData" :key="index">
  					<view class="goods_item" @click="jumpgoods(item.id)">
  						<image :src="item.thumb" mode="aspectFill" class="goods-image"></image>
  						<view class="goods_item_left">
							<view class="text-overflow goods_title">{{item.title}}</view>
							<view class="goods_price">
								<view class="goods_price-text">
									<text class="price-text-icon">￥</text>
									<text class="price-text-num">{{item.marketprice}}</text>
								</view>
								<view class="goods_price-button">立即申请</view>
							</view>
							<view class="goods-info-list" style="margin-top:12rpx;">
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">积分值:</text>
									<text class="goods-info-item-num">{{item.jfz || '0.00'}}</text>
								</view>
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">PV&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.pv || '0.00'}}</text>
								</view>
							</view>
							<view class="goods-info-list">
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">贝&nbsp;&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.bz || '0.00'}}</text>
								</view>
								<view class="goods-info-item red-color">
									<text class="goods-info-item-text">股&nbsp;&nbsp;值:</text>
									<text class="goods-info-item-num">{{item.tzz || '0.00'}}</text>
								</view>
							</view>
						</view>
  					</view>
  				</view>
  			</view>
			<!-- <u-loadmore :status="status" /> -->
  			<view class="u-f-ajc u-f-column" v-if="listData.length==0" style="margin: 200rpx 0;">
  				<u-empty mode="list" text="暂无数据" color="#ffffff" icon-color="#ffffff"></u-empty>
  			</view>
  		</view>
  	</scroll-view>
	<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        shopid: '28',
        content: '',
        listData: [],
        page: 1,

        status: 'nomore',
        loadText: {
          loadmore: '轻轻上拉',
          loading: '努力加载中',
          nomore: '实在没有了'
        },
        userInfo: {},
        datas: {},
      };
    },
    onLoad(e) {
      if (e.shopid) this.shopid = e.shopid
      this.searchData()
    },
    onReachBottom() {
      this.page += 1
      this.searchData()
    },
    methods: {
      async searchData() {
        this.status = 'loading'
        let {
          data
        } = await this.$myRequest({
          url: `/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.workroom_goods_list&app=1`,
          data: {
            openid: uni.getStorageSync('openid'),
            page: this.page,
          }
        })
        this.status = 'loadmore'
        if (data.error == 1) {
          this.status = 'nomore'
          return this.$refs.uToast.show({
            title: data.message,
            type: 'warning',
          })
        }
        console.log(data)
        this.listData.push(...data.list)
      },
      verifySearch() {
        if (!this.content) {
          return this.$refs.uToast.show({
            title: '请输入搜索内容',
            type: 'error',
          })
        }
        this.listData = []
        this.searchData()
      },
      jumpgoods(id) {
        uni.navigateTo({
          url: '/pages/goods/detail?goodsid=' + id +'&type=smyq'
          // url: `/pages/member/gzsPay?id=${id}`
        });
      },
    }
  }
</script>

<style lang="scss">
	.scroll-box{
		box-sizing: border-box;
		height: 94vh;
	}
	.uni-scroll-view-content{
		height: auto;
	}
	page {
	  height: 100%;
	  background: url('/static/images/home/sm_bg.png') center -70rpx no-repeat;
	  background-size: 100% 106%;
	}

	.container {
		width: 100%;
		background-size: cover;
		box-sizing: border-box;
		;
	}

	.navbar {
		width: 100%;
		padding: 150rpx 0 56rpx;

		image {
			width: 80%;
			height: 130rpx;
		}
	}

	.content {
		padding: 0 15rpx;

		.goods_list {
			.goods_item-group {
				padding: 15rpx;
			}

			.goods_item {
				background: url('/static/images/home/gf_gzs_bg.png') center no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 26rpx;
				display: flex;
				align-items: center;
				.goods_item_left{
					flex:1;
					padding-left:60rpx;
				}
				.goods-image {
					width: 300rpx;
					height: 300rpx;
					display: block;
					border-radius: 20rpx;
				}

				.goods_title {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 38rpx;
					font-weight: bold;
				}

				.goods_price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #C82400;
					.goods_price-text {
						color: #d93d16;
						.price-text-icon {
							font-size: 24rpx;
						}

						.price-text-num {
							font-size: 36rpx;
							font-weight: bold
						}
					}

					.goods_price-button {
						width: 130rpx;
						height: 46rpx;
						border-radius: 46rpx;
						background: #d93d16;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}
				}

				.goods-info-list {
					display: flex;
					align-items: center;
					.goods-info-item {
						font-size: 24rpx;
						width: 50%;
						display: flex;
						align-items: center;
						font-family: PageFonts!important;
						height: 32rpx;
					}
					.red-color{
						color:#d52d22;
					}
					.goods-info-item-text{
						width:60%;
						height: 30rpx;
						line-height: 30rpx;
					}
					.goods-info-item-num {
						width:40%;
					}
					.font-justify{
						text-align: justify;
						text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
						text-align-last: justify;
					}
				}
			}
		}
	}
</style>
